<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-15 13:50:26
 * @LastEditors: wtzhang
 * @LastEditTime: 2021-07-20 10:34:20
-->
<template>
  <div>
    <h2>计算属性与监视</h2>
    <fieldset>
      <legend>姓名操作</legend>
      姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName"><br><br>
      名字：<input type="text" placeholder="请输入名字" v-model="user.lastName">
    </fieldset>
    <br><br>
    <fieldset>
      <legend>计算属性和监视的演示</legend>
      姓名：<input type="text" placeholder="显示姓名" v-model="fullName1">&nbsp;<i>fullName1</i><br><br>
      姓名：<input type="text" placeholder="显示姓名" v-model="fullName2">&nbsp;<i>fullName2</i><br><br>
      姓名：<input type="text" placeholder="显示姓名" v-model="fullName3">&nbsp;<i>fullName3</i>
    </fieldset>

    <!-- watch And watchEffect -->
    <watchAndwatchEffect />
  </div>
</template>

<script lang="ts">
import watchAndwatchEffect from '@/components/watchAndwatchEffect.vue'
import { computed, defineComponent, reactive, watch, ref, watchEffect } from 'vue'
export default defineComponent ({
  name: 'calcAttr',
  components: {
    watchAndwatchEffect
  },
  setup(){
    // 定义一个响应式对象
    const user = reactive({
      // 姓氏
      firstName: "东方",
      // 名字
      lastName: "不败"
    })
    // 通过计算属性的方法，实现第一个姓名的显示
    // vue3 中的计算属性
    // 计算属性的函数中如果只传入一个回调函数，表示的是get
    const fullName1 = computed(() => {
      return user.firstName + '_' + user.lastName
    })
    // console.log(fullName1);
    const fullName2 = computed({
      get(){
        return user.firstName + '_' + user.lastName
      },
      set(val:string) {
        const names = val.split('_')
        user.firstName = names[0]
        user.lastName = names[1]
      }
    })

    // 监视 ---- 监视指定的数据 第三个 fullName3
    const fullName3 = ref('')
    // watch(指定数据, 回调)
    // watch(user, (val)=> {})
    watch(user, ({firstName, lastName}) => {
      fullName3.value = firstName + '_' + lastName
    }, {immediate: true}) // immediate 默认会执行一次watch deep：深度监视
    
    // 监视不需要配置 immediate 就会默认执行一次 watch
    // watchEffect(() => {
    //   fullName3.value = user.firstName + '_' + user.lastName
    // })
    
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    }
  }
})
</script>

<style lang="scss" scoped>
    
</style>